<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h:head>
	<style type="text/css">

/* tamaño de fuente base */
.ui-widget .ui-widget {
	font-size: 13px;
}
/*titulo de panel*/
.panel {
	border: none !important;
	width: 1024px !important;
}
/*tabla blanca*/
table.borde1 {
	border-collapse: collapse;
	border: 1px solid #EEEAE9;
	font-size: 11px;
}
/*tabla gris*/
table.borde2 {
	border-collapse: collapse;
	background-color: #EEEAE9;
	font-size: 11px;
}
/*centrar botones*/
.centrar {
	margin: 0 auto;
}

/*celdas con borde blanco*/
td.borde1 {
	border: 1px solid white;
}
/*celdas blancas con borde gris*/
td.borde2 {
	border: 1px solid #EEEAE9;
	background-color: white;
}
/*estilo paginador*/
.ui-paginator-bottom {
	border: none !important;
	background: none !important;
	color: black !important;
	text-align: right !important;
}
/*color letra botones*/
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default
	{
	color: black !important;
}
/*color header datatable*/
.ui-resizable-column {
	background: #EEEAE9 !important;
}
/*borde botones*/
.ui-button-text-only {
	border: 3px solid #000000 !important;
}
/*bordes de los botones*/
.ui-corner-all {
	border-radius: 0px !important;
}
/*letra y bordes datatable*/
.ui-datatable table {
	border-collapse: separate;
	font-size: 11px !important;
}
/* espaciado en encabezado de datatable*/
.ui-datatable th {
	white-space: normal !important;
}
/*ubicacion de icono de sort en las datatable*/
.ui-datatable .ui-sortable-column-icon {
	position: static !important;
}
/*ubicacion de icono de sort en las datatable*/
td.sort {
	font-weight: bold !important;
	text-align: center !important;
}
/*tamaño fuente input autocomplete*/
.ui-autocomplete-input {
	font-size: 11px !important;
}
/*tamaño fuente items autocomplete*/
.ui-autocomplete-panel .ui-autocomplete-list-item {
	font-size: 11px !important;
}

.ui-widget-header{
background-image: url("/InicialMultiabonos/faces/images/Empresarial_borde_inicio.gif");
background-repeat: no-repeat;
background-position: left;
}

.ui-panel .ui-panel-titlebar {
    padding: 0em 1.5em 0em;
}

</style>
</h:head>
<h:body>
	<h:form>
		<p:panel styleClass="panel">
			<p style="font-size: 11px">
				<h:outputLabel value="#{msg.bienvenido}:" />
				<b><h:outputLabel value="#{msg.senor}:" /></b>
			</p>
			<table width="100%" style="font-size: 15px;">
				<tbody>
					<tr>
						<td>
							<p style="color: #A81918; font-weight: bold;">
								<h:outputLabel value="#{msg.adminsitracionServicios}:" />
							</p> <br />
						</td>

						<td align="right">
							<p style="font-weight: bold;">--Fecha--</p>
						</td>
					</tr>
				</tbody>
			</table>


			<p:panel header="Datos de la empresa">
				<table class="borde1" width="100%">
					<tbody>
						<tr>
							<td class="borde2"
								style="background-color: #EEEAE9; width: 350px"><b><h:outputLabel
										value="#{msg.identificacionEmpresa}:" /></b></td>

							<td class="borde2"></td>
						</tr>
						<tr>
							<td class="borde2"
								style="background-color: #EEEAE9; width: 350px"><b><h:outputLabel
										value="#{msg.nombreEmpresa}:" /></b></td>

							<td class="borde2"></td>
						</tr>
					</tbody>
				</table>
			</p:panel>
			<br />
			<p:panel header="Datos del servicio">
				<table class="borde1" width="100%">
					<tbody>
						<tr>
							<td style="background-color: #EEEAE9; width: 350px"><h:outputLabel
									value="#{msg.nombreServicio}:" /></td>

							<td>Multiabonos</td>
						</tr>
					</tbody>
				</table>
			</p:panel>
			<br />
			<p:panel>
				<table class="borde2" width="100%">
					<tbody>
						<tr>
							<td collspan="4"><b><h:outputLabel
										value="#{msg.parametrosDispersion}" /></b></td>
						</tr>
						<tr>
							<td class="borde1"><h:outputLabel for="codigo"
									value="#{msg.codigoUnico}:" /> <h:selectOneMenu id="codigo"
									value="#{pprBean.firstname}">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItems value="#{pprBean.cities}" />
								</h:selectOneMenu></td>
							<td class="borde1"><h:outputLabel for="franquicia"
									value="#{msg.franquicia}:" /> <h:selectOneMenu id="franquicia"
									value="#{pprBean.firstname}">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItems value="#{pprBean.cities}" />
								</h:selectOneMenu></td>
							<td class="borde1"><h:outputLabel for="tipoCuenta"
									value="#{msg.tipoCuenta}:" /> <h:selectOneMenu id="tipoCuenta"
									value="#{pprBean.firstname}">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItems value="#{pprBean.cities}" />
								</h:selectOneMenu></td>
							<td class="borde1"><h:outputLabel for="cuentaComercio"
									value="#{msg.cuentaComercio}:" /> <p:autoComplete
									id="cuentaComercio" dropdown="true"
									value="#{autoCompleteBean.selectedPlayer2}"
									completeMethod="#{autoCompleteBean.completePlayer}" /></td>
						</tr>
					</tbody>
				</table>
				<table class="borde2" width="100%">
					<tbody>
						<tr>
							<td class="borde1"><h:outputLabel for="tipoDispersion"
									value="#{msg.tipoDispersion}:" /> <h:selectOneMenu
									id="tipoDispersion" value="#{pprBean.firstname}">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItems value="#{pprBean.cities}" />
								</h:selectOneMenu></td>
							<td class="borde1"><h:outputLabel for="dispersionCliente"
									value="#{msg.valorDispersionCliente}:" /> <p:inputText
									id="dispersionCliente" value="#{pprBean.firstname}" /></td>
							<td class="borde1"><h:outputLabel for="empresaDestino"
									value="#{msg.empresaDestino}:" /> <h:selectOneMenu
									id="empresaDestino" value="#{pprBean.firstname}">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItems value="#{pprBean.cities}" />
								</h:selectOneMenu></td>
							<td class="borde1"><h:outputLabel for="productoDestino"
									value="#{msg.tipoProductoDestino}:" /> <h:selectOneMenu
									id="productoDestino" value="#{pprBean.firstname}">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItems value="#{pprBean.cities}" />
								</h:selectOneMenu></td>
							<td class="borde1"><h:outputLabel for="nProductoDestino"
									value="#{msg.numeroProductoDestino}:" /> <h:selectOneMenu
									id="nProductoDestino" value="#{pprBean.firstname}">
									<f:selectItem itemLabel="Select One" itemValue="" />
									<f:selectItems value="#{pprBean.cities}" />
								</h:selectOneMenu></td>
						</tr>
					</tbody>
				</table>

				<br />
				<h:panelGrid columns="2" styleClass="centrar">
					<p:button value="#{msg.adicionar}" style="font-size: 11px"></p:button>
					<p:button value="#{msg.consultar}" style="font-size: 11px"></p:button>
				</h:panelGrid>
				<br />
				<p:dataTable id="cars" var="car" resizableColumns="true"
					value="#{tableBean.datamodel}" paginator="true"
					paginatorPosition="bottom" rows="10"
					paginatorTemplate="#{msg.irPagina} {JumpToPageDropdown}">
					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.codigoUnico}">
						<h:outputText value="" />
					</p:column>
					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.franquicia}">
						<h:outputText value="" />
					</p:column>

					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.tipoCuenta}">
						<h:outputText value="" />
					</p:column>
					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.cuentaComercio}">
						<h:outputText value="" />
					</p:column>

					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.tipoDispersion}">
						<h:outputText value="" />
					</p:column>

					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.valorDispersionBanco}">
						<h:outputText value="" />
					</p:column>
					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.valorDispersionCliente}">
						<h:outputText value="" />
					</p:column>

					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.tipoProductoDestino}">
						<h:outputText value="" />
					</p:column>
					<p:column sortBy="#{car.manufacturer}"
						headerText="#{msg.numeroProductoDestino}">
						<h:outputText value="" />
					</p:column>
					<p:column sortBy="#{car.manufacturer}" headerText="#{msg.estado}">
						<h:outputText value="." />
					</p:column>
					<p:column headerText="Acciones">
						<h:outputText value="Modificar / Eliminar" />
					</p:column>
				</p:dataTable>
			</p:panel>

			<h:panelGrid columns="2" styleClass="centrar">
				<p:button value="#{msg.activar}" style="font-size: 11px"></p:button>
				<p:button value="#{msg.volver}" style="font-size: 11px"></p:button>
			</h:panelGrid>
			<br />
			<div
				style="width: 350px; margin: 0 auto; text-align: center; font-size: 11px">
				<h:outputLabel value="#{msg.msgActivarOrdenes}:" />
			</div>

		</p:panel>
	</h:form>
</h:body>
</html>